<!--
 * @Author: alenjzhang
 * @Date: 2024-03-20 20:56:30
 * @Description: 头像上传
-->
<script setup lang="ts">
// import { useBase64 } from '@vueuse/core';
// import { DeleteOutlined } from '@ant-design/icons-vue';
import { deleteCos, uploadCos } from '@/api';
import { useCustomForm } from '@/hooks';
import { checkFileType } from '@/tools/file';
import type { FILE } from '@/types';
import { VideoPlayer } from '@videojs-player/vue'
import { message } from 'ant-design-vue';
import 'video.js/dist/video-js.css';
import { type Ref, ref, watchEffect } from 'vue';

const field = useCustomForm();

const props = defineProps<{
	value?: FILE[]
}>()

type FileItem = File & { uid: string };

const emit = defineEmits(['update:value']);

const avatar = ref() as Ref<File>;
// const { base64 } = useBase64(avatar);
const files = ref<FILE[]>([]);

const beforeUpload = (file: FileItem) => {
	if (checkFileType(file.name) === null) {
		return message.warn('只允许上传图片或者视频文件')
	}
	let imageLength = 0;
	let videoLength = 0;
	for (const v of files.value) {
		const fileStr = v.name || v.url;
		if (checkFileType(fileStr) === 'video') {
			videoLength++;
		}
		if (checkFileType(fileStr) === 'img') {
			imageLength++;
		}
	}
	if (imageLength >= 3 || videoLength >= 1) {
		return message.warn('最多上传1个视频3个张图片')
	}
	avatar.value = file;
	handleChange(file);
	return false;
};

const change = () => {
	emit('update:value', files.value);
	field.onFieldChange();
};

watchEffect(() => {
	if (props.value) {
		files.value = props.value.slice();
	}
});

const handleChange = async (file: FileItem) => {
	const res = await uploadCos(file);
	const url = res.Data?.Url || '';
	files.value.unshift({
		url,
		name: file.name,
		type: file.type,
		id: file.uid
	});
	change();
};

const remove = (item: FILE) => {
	deleteCos([item.url]).send();
	files.value = files.value.filter((v) => v.id !== item.id);
	change();
};

// const open = (url: string) => {
// 	window.open(url);
// };

// src="https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4"

</script>

<template>
	<div class="flex gap-20 items-center">
		<div class="w-100">
			<a-upload v-model="avatar" :max-count="4" :show-upload-list="false"
				name="avatar" list-type="picture-card" :before-upload="beforeUpload">
				上传
			</a-upload>
		</div>
		<!-- <div>
			<div v-for="item in files" class="flex items-center">
				<a-button type="link" @click="open(item.url)">{{ item.name }}</a-button>
				<a-button class="pl0" type="link"><DeleteOutlined @click="remove(item)" /></a-button>
			</div>
		</div> -->
		<div class="flex">
			<div v-for="item in files" class="mr10 position-relative">

				<a-badge>
					<template #count>
						<img @click="remove(item)" src="@/assets/del.svg" />
					</template>
					<a-image v-if="checkFileType(item.name || item.url) === 'img'" :width="102" :height="102" :src="item.url" />
					<video-player
						v-if="checkFileType(item.name || item.url) === 'video'"
						controls
						:loop="true"
						:volume="0.6"
						:src="item.url"
						class="w-200 h-102"
					></video-player>
				</a-badge>
			</div>
		</div>
	</div>
</template>
